<?php TPL::output('admin/global/header.tpl.htm'); ?>
<?php TPL::output('admin/global/nav_menu.tpl.htm'); ?>
<style>
    .float-right{
        float: right;
        cursor: pointer;
    }
    .overflow-auto{
        overflow: auto;
        width: 100%;
    }
</style>
<div class="aw-content-wrap">
    <div class="mod">
        <div class="mod-head">
            <h3>
                <ul class="nav nav-tabs">
                    <li <?php if($this->special['id']){ ?> class="active"<?php } ?>><a href="admin/goods/special/"><?php _e('专题列表'); ?></a></li>
                    <li><a href="admin/goods/special/type-forbidden"><?php _e('下线专题'); ?></a></li>
                    <li><a href="#search" data-toggle="tab"><?php _e('搜索'); ?></a></li>
                    <li <?php if(!$this->special['id']){ ?> class="active"<?php } ?>><a href="#add" data-toggle="tab"><?php _e('添加专题'); ?></a></li>
                </ul>
            </h3>
        </div>

        <div class="tab-content mod-content">
            <div class="tab-pane active" id="add">
            <div class="table-responsive">
            <form action="admin/goods_ajax/save_goods_special/" id="special_form" method="post">
                <?php if($this->special['id']){?>
                 <input type="hidden" name="id" value="<?php echo $this->special['id']?>"/>
                <?php }?>
            <table class="table table-striped">
                <tr>
                    <td>
                        <div class="form-group">
                            <span class="col-sm-4 col-xs-3 control-label"><?php _e('标题'); ?>:</span>
                            <div class="col-sm-5 col-xs-8">
                                <input class="form-control" name="title" type="text" value="<?php echo  $this->special['title'];?> "/>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>
                        <div class="form-group">
                            <span class="col-sm-4 col-xs-3 control-label"><?php _e('banner'); ?>:</span>
                            <div class="col-sm-5 col-xs-8">
                                <input class="form-control" name="banner" type="text" value="<?php echo  $this->special['banner'];?> " />
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-group">
                            <span class="col-sm-4 col-xs-3 control-label"><?php _e('视频'); ?>:</span>
                            <div class="col-sm-5 col-xs-8">
                                <input class="form-control" name="video" type="text" value="<?php echo  $this->special['video'];?> " />
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-group">
                            <span class="col-sm-4 col-xs-3 control-label"><?php _e('是否上线'); ?>:</span>
                            <div class="col-sm-6 col-xs-8">
                                <div class="btn-group mod-btn">
                                    <label type="button" class="btn mod-btn-color">
                                        <input type="radio" name="state" value="1" <?php  if($this->special['state']==1){?> checked <?php } ?> /> <?php _e('是'); ?>
                                    </label>

                                    <label type="button" class="btn mod-btn-color">
                                        <input type="radio" name="state" value="0" <?php  if($this->special['state']==0){?> checked <?php } ?>/> <?php _e('否'); ?>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-group">
                            <span class="col-sm-4 col-xs-3 control-label"><?php _e('内容设置'); ?>:</span>
                            <div class="col-sm-6 col-xs-8">
                                <div class="btn-group mod-btn">

                                    <input type="button" value="<?php _e('添加分组'); ?>" class="btn btn-primary center-block js-add-special-class-btn" />

                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-group">
                            <!--分组tmp-->
                            <section id="classTpl"  style="display: none">
                                <div class="js-tpl">
                                    <div class="form-group overflow-auto">
                                        <span class="col-sm-3 col-xs-3 control-label text-right"><?php _e('分组名称'); ?>:</span>
                                        <div class="col-sm-5 col-xs-6">
                                            <div class="btn-group mod-btn">
                                                <input type="text" name="class_name" value="" class="form-control" />
                                            </div>
                                        </div>
                                    </div>
                                    <table  class="table table-striped js-special-item" style="border: 1px solid #428bca">

                                    </table>

                                    <div class="form-group">

                                        <input type="button" value="<?php _e('添加商品'); ?>" class="btn btn-primary center-block  js-add-item-btn" />

                                    </div>
                                </div>
                            </section>
                            <!--商品-->
                            <section id="itemTpl" style="display: none">
                                <table  class="table table-striped " style="border: 1px solid #428bca">
                                    <tr class="js-tpl js-special-item-tr" style="border-bottom:  1px solid #428bca">
                                        <td>
                                            <div class="form-group overflow-auto" style="margin-top: 15px;">
                                                <span class="col-sm-3 col-xs-3 control-label text-right">
                                                    <div class="js-sort-item-btn" style="float: left">↑↓</div>
                                                    <?php _e('标题'); ?>:</span>
                                                <div class="col-sm-5 col-xs-6">
                                                    <div class="btn-group mod-btn">
                                                        <input name="item_title" type="text" value="" class="form-control" />
                                                    </div>
                                                </div>
                                                <div class="col-sm-2 col-xs-2">

                                                <div class="float-right js-del-item-btn">删除</div>
                                                </div>
                                            </div>

                                            <div class="form-group overflow-auto">
                                                <span class="col-sm-3 col-xs-3 control-label text-right"><?php _e('简短介绍'); ?>:</span>
                                                <div class="col-sm-5 col-xs-6">
                                                    <div class="btn-group mod-btn">
                                                        <input type="text" name="item_des" value="" class="form-control" />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group overflow-auto">
                                                <span class="col-sm-3 col-xs-3 control-label text-right"><?php _e('图片'); ?>:</span>
                                                <div class="col-sm-5 col-xs-6">
                                                    <div class="btn-group mod-btn">
                                                        <input type="text" name="item_pic" value="" class="form-control" />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group overflow-auto">
                                                <span class="col-sm-3 col-xs-3 control-label text-right"><?php _e('价格'); ?>:</span>
                                                <div class="col-sm-5 col-xs-6">
                                                    <div class="btn-group mod-btn">
                                                        <input type="text" name="item_price" value="" class="form-control" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group overflow-auto">
                                                <span class="col-sm-3 col-xs-3 control-label text-right"><?php _e('链接地址'); ?>:</span>
                                                <div class="col-sm-5 col-xs-6">
                                                    <div class="btn-group mod-btn">
                                                        <input type="text" name="item_url" value="" class="form-control" />
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </section>
                            <!--商品tpl end/-->
                            <div class="col-sm-12" id="special_container">
                                <?php  foreach($this->special['container'] AS $key=>$val){ ?>
                                <section  style="display: block">
                                    <div class="js-tpl">
                                        <div class="form-group overflow-auto">
                                            <span class="col-sm-3 col-xs-3 control-label text-right"><?php _e('分组名称'); ?>:</span>
                                            <div class="col-sm-5 col-xs-6">
                                                <div class="btn-group mod-btn">
                                                    <input type="text" name="class_name" value="<?php echo $val['class_name'];?>" class="form-control" />
                                                </div>
                                            </div>
                                        </div>
                                        <table  class="table table-striped js-special-item" style="border: 1px solid #428bca">
                                            <?php foreach($val['sub'] AS $sub_key =>$sub_val){ ?>
                                            <tr class="js-tpl js-special-item-tr" style="border-bottom:  1px solid #428bca">
                                                <td>
                                                    <div class="form-group overflow-auto" style="margin-top: 15px;">
                                                        <span class="col-sm-3 col-xs-3 control-label text-right">
                                                            <div class="js-sort-item-btn" style="float: left">↑↓</div>
                                                            <?php _e('标题'); ?>:
                                                        </span>
                                                        <div class="col-sm-5 col-xs-6">
                                                            <div class="btn-group mod-btn">
                                                                <input name="item_title" type="text" value="<?php echo $sub_val['title'];?>" class="form-control" />
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-2 col-xs-2">

                                                            <div class="float-right js-del-item-btn">删除</div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group overflow-auto">
                                                        <span class="col-sm-3 col-xs-3 control-label text-right"><?php _e('简短介绍'); ?>:</span>
                                                        <div class="col-sm-5 col-xs-6">
                                                            <div class="btn-group mod-btn">
                                                                <input type="text" name="item_des" value="<?php echo $sub_val['des'];?>" class="form-control" />
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group overflow-auto">
                                                        <span class="col-sm-3 col-xs-3 control-label text-right"><?php _e('图片'); ?>:</span>
                                                        <div class="col-sm-5 col-xs-6">
                                                            <div class="btn-group mod-btn">
                                                                <input type="text" name="item_pic" value="<?php echo $sub_val['pic'];?>" class="form-control" />
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group overflow-auto">
                                                        <span class="col-sm-3 col-xs-3 control-label text-right"><?php _e('价格'); ?>:</span>
                                                        <div class="col-sm-5 col-xs-6">
                                                            <div class="btn-group mod-btn">
                                                                <input type="text" name="item_price" value="<?php echo $sub_val['price'];?>" class="form-control" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group overflow-auto">
                                                        <span class="col-sm-3 col-xs-3 control-label text-right"><?php _e('链接地址'); ?>:</span>
                                                        <div class="col-sm-5 col-xs-6">
                                                            <div class="btn-group mod-btn">
                                                                <input type="text" name="item_url" value="<?php echo $sub_val['url'];?>" class="form-control" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <?php }?>
                                        </table>

                                        <div class="form-group">

                                            <input type="button" value="<?php _e('添加商品'); ?>" class="btn btn-primary center-block  js-add-item-btn" />

                                        </div>
                                    </div>
                                </section>
                                <?php }?>


                            </div>

                        </div>
                    </td>
                </tr>

                <tfoot>
                <tr>
                    <td>
                        <input type="button" value="<?php _e('走你'); ?>" class="btn btn-primary center-block js-special-submit" style="margin: 0"  />
                    </td>
                </tr>
                </tfoot>
            </table>
            </form>
            </div>
            </div>

            <!--搜索模板-->
            <?php TPL::output('admin/goods/search.tpl.htm'); ?>

        </div>
    </div>
</div>

<?php TPL::output('admin/global/footer.tpl.htm'); ?>
<script>
    $(function () {

        $("#special_container").on('click','.js-del-item-btn',function () {
            $(this).parents('.js-special-item-tr').remove();
        });
        //排序
        $("#special_container").on('click','.js-sort-item-btn',function () {
            var  table_node = $(this).parents('.js-special-item');
            var  current_node = $(this).parents('.js-special-item-tr');
            var prev_node = current_node.prev('.js-special-item-tr');

            $(prev_node).insertAfter(current_node);

        });

            $(".js-add-special-class-btn").click(function () {

            var ClassTpl = $("#classTpl .js-tpl").clone();
            // console.log(ClassTpl);
            ClassTpl.appendTo($("#special_container"));

        });

        $("#special_container").on('click','.js-add-item-btn',function () {

           var node =  $(this).parent('div').prev('.js-special-item');

            $("#itemTpl .js-tpl").clone().removeClass('js-tpl').appendTo(node);

        })

        // AWS.ajax_post(
        $(".js-special-submit").click(function () {
            var  class_name = [];
            $("#special_container .js-tpl").each(function (k,node) {
                console.log(k)
                console.log(node)
                var c_name = $(node).find("input[name=class_name]").val();
                var subclass = [];
                $(node).find('.js-special-item tr').each(function (sub_k,sub_node) {
                    // console.log(sub_k,sub_node)
                    var  _sub_this = $(sub_node);
                    var title  = $.trim( _sub_this.find("input[name=item_title]").val());
                    var des  = $.trim(_sub_this.find("input[name=item_des]").val());
                    var pic  =$.trim( _sub_this.find("input[name=item_pic]").val());
                    var price  = $.trim(_sub_this.find("input[name=item_price]").val());
                    var url  = $.trim(_sub_this.find("input[name=item_url]").val());

                    subclass.push({title:title,des:des,pic:pic,price:price,url:url});

                })
                var sub = {class_name:c_name,sub:subclass};

                class_name.push(sub)

            })
            console.log(class_name);
            // $("input[name=container]").val(class_name);
            var customer_data = {
                container:class_name
            };
            AWS.ajax_post($("#special_form"),'','default',customer_data);
        })
    })
</script>